<template>
  <ProConfigProvider :theme="theme">
    <router-view #="{ Component }">
      <component :is="Component" />
    </router-view>
  </ProConfigProvider>
</template>

<script setup lang="ts">
  import { watchEffect, computed } from 'vue';
  import { useRoute } from 'vue-router';
  import { transformI18n } from './hooks/useI18n';
  import { defineTokens, defineComponents } from './mainConfig';

  const route = useRoute();

  watchEffect(() => {
    if (route.meta?.title) {
      // 翻译网页标题
      document.title = transformI18n(route.meta.title);
    }
  });

  const theme = computed(() => {
    return {
      token: defineTokens,
      components: defineComponents,
    };
  });
</script>
